<template>
    

    <!-- 背景视图 -->
    <view class="bg">

        <!-- wrap: “包裹、环绕”  -->
        <view class="wrap">
            <!-- flex的包围容器 -->
            <view class="container">
				<!-- 顶部安全区域占位 -->
				<view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view>
				
                <!-- 头部 -->
                <view class="header">	
                    <!-- 左边 -->
                    <view class="logo">
                        <image src="@/static/logo_hiack.png"></image>
                    </view>
                    <!-- 右边 -->
                    <!-- <view class="role">
                        <image src="@/static/user.png"></image>
                    </view> -->
                </view>

                <!-- 中间 1-->
                <view class="banner">
                    <!-- <image src="@/static/logo.png"/> -->
                    <image src="@/static/index/majiang.png"/>
                </view>

                <!-- 中间2 -->
                <view class="info">
                    <!-- <view class="info_item">
                        <view class="icon">
                            <image src="@/static/logo.png"></image>
                        </view>
                        <view class="text">
                                个人信息1
                        </view>
                        <view class="icon">
                            <image src="@/static/logo.png"></image>
                        </view>
                    </view> -->

                    <view class="info_item" @click="createRoom">
                        <view class="icon">
                                <!-- <image src="@/static/index/meau1.jpg"></image> -->
                                <image src="@/static/index/index01.png"></image>
                        </view>
                        <view class="text">
                                创建房间
                        </view>
                    </view>

                    <view class="info_item" @click="openScanCode">
                        <view class="icon">
                            <!-- <image src="@/static/coding.png"></image> -->
                                <image src="@/static/index/index02.png"></image>
                        </view>
                        <view class="text">
                                加入房间
                        </view>
                    </view>

                    <view class="info_item" @click="towelcome">
                        <view class="icon">
                            <!-- <image src="@/static/coding.png"></image> -->
                            <image src="@/static/index/index03.png"></image>
                        </view>
                        <view class="text">
                                欢迎页
                        </view>
                    </view>

                    <view class="info_item" @click="test001">
                        <view class="icon">
                            <image src="@/static/coding.png"></image>
                        </view>
                        <view class="text">
                            coding . . .
                        </view>
                    </view>

                </view>

                <!-- 脚部 -->
                <view class="foot">

                    <!-- <view class="footer"> -->

                        <!-- 图标部分 -->
                        <!-- <view class="footer-icons">
                            <image src="/static/coding.png" class="footer-icon"></image>
                            <image src="/static/coding.png" class="footer-icon"></image>
                            <image src="/static/coding.png" class="footer-icon"></image>
                        </view> -->
                        <!-- 分割线 -->
                        <!-- <view class="footer-divider"></view> -->
                        <!-- <view class="footer-copyright">
                            &copy;2025   ·  HiACK-回响  ·  POWER BY 1stfly 
                        </view> -->
                    <!-- </view> -->

                </view>
            </view>
        </view>
    </view>

    <!-- 自定义底部导航栏 -->
    <customtabbar ></customtabbar>
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 引入自定义底部导航栏组件
import customtabbar from "@/components/customtabbar/customtabbar.vue";
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { SOCKET_SERVER_URL } from '@/config.js';
// 引入 Pinia 相关工具和 socketStore
import { storeToRefs } from 'pinia';
import { useSocketStore } from '@/stores/modules/socketStore.js';
// 定义响应式数据
// const title = ref('Hello');
// const safeAreaInsets = ref(uni.getSystemInfo());
// 初始化 socketStore
const socketStore = useSocketStore();
// 如果需要使用响应式状态，可以解构（根据需要添加）
const { 
  connectionState,
  isConnectedToRoom
} = storeToRefs(socketStore);



// 生命周期钩子，页面加载时触发
onLoad(() => {
    // 可在此处添加页面加载时的逻辑
});

//需要先检查当前是否在房间内，是否有创建未关闭的房间
const createRoom = async () => {
	// 从本地存储获取用户信息 JSON 字符串
	const data = uni.getStorageSync('user');
	console.log('原始数据:', data);
	 // 解析 JSON 字符串为 JavaScript 对象
	const userData = JSON.parse(data);
	//访问json
	const userinfo = userData.userinfo;
	
	
    const res = await uni.request({
        // url: `${SOCKET_SERVER_URL}/room/create_room`,
        url: 'http://172.16.24.120:5000/mysqlroom/create_room',
        // url: 'http://172.16.24.120:5000/room/create_room',
		method: 'POST',
		data: {
		       creatorId: userinfo.userid
		      }
    });
	
    if (res.statusCode === 201) {
        const roomId = res.data.room_id;
		//建立websocket连接
		connectToRoom(roomId);
		// uni.setStorageSync('room_id', roomId);
        uni.navigateTo({

            // url: `/pages/testpage/testpage/test17?room_id=${room_id}`
            url: `/pages/room/room?roomId=${roomId}`
            // url: `/pages/room/room/${roomId}`
        });
    } else {
        uni.showToast({
            title: '创建房间失败',
            icon: 'none'
        });
    }
};

// 连接到房间（添加参数）
const connectToRoom = async (roomId) => {
  try {

    await socketStore.connect(roomId); // 调用Store的连接方法
    console.log('连接房间成功:', roomId);
  } catch (err) {
    uni.showToast({ title: '连接失败: ' + err.message, icon: 'none' });
    console.error('连接错误:', err);
  }
};



// 打开扫码功能
const openScanCode = () => {
  uni.scanCode({
    scanType: ['barCode', 'qrCode'],
    showAlbum: false,
    success: (res) => {
      console.log('扫码成功', res);
      if (res.result) {
		console.log(res)
		console.log(res)
		console.log(res)
		console.log(res)
		joinRoom(res)
      }
    },
    fail: (err) => {
      console.error('扫码失败', err);
      uni.showToast({
        title: '扫码失败，请重试',
        icon: 'none'
      });
    },
    complete: () => {
      console.log('扫码完成');
    }
  });
};





// 当你创建初始化固然可以只有你一人，但当别人创建你加入仍旧会初始化，还有一人吗  不合理，应该更新用户列表
const joinRoom = async (joinroom_id) => {
	// 从二维码获取，此处为实例
	const roomIdTest=joinroom_id

	// 从本地存储获取用户信息 JSON 字符串
	const data = uni.getStorageSync('user');
	 // 解析 JSON 字符串为 JavaScript 对象
	const userData = JSON.parse(data);
	//访问json
	const userinfo = userData.userinfo;
	
	
	const res = await uni.request({
	    url: 'http://172.16.24.120:5000/mysqlroom/join_room',
		method: 'POST',
		// data: {room_id: roomId.value, user_id: userinfo.userid }
		data: {roomId: roomIdTest, userId: userinfo.userid }
	});
	
	//什么时候更新的前端store   后端房间初始化同步过来的
	if (res.statusCode === 200) {
	    const roomId = res.data.room_id;
		//建立websocket连接
		connectToRoom(roomId);
		// websocket更新成员列表信息    为什么就算我不加这一句 页面也会更新新进来的成员？————通过房间初始化的事件进行了更新   别人新进房间初始化发送的消息  被旧房间监听到了
		// socketStore.emit('user_joined_notify', { room_id: room_id, user_id: userinfo.userid });
	    uni.navigateTo({
	       url: `/pages/room/room?roomId=${roomId}`
	    });
	} else {
	    uni.showToast({
	        title: '加入房间失败',
	        icon: 'none'
	    });
	}
};


// const joinRoom = () => {
//     uni.showModal({
//         title: '加入房间',
//         content: '请输入房间ID',
//         editable: true,
//         placeholderText: '例如：f3c9176a-2bd1-4a35-bf64-4d59e786edbc',
//         success: async (res) => {
//             if (res.confirm) {
//                 const roomId = res.content.trim();
//                 if (!roomId) {
//                     uni.showToast({ title: '请输入房间ID', icon: 'none' });
//                     return;
//                 }
//                 // 验证UUID格式
//                 if (!/^[0-9a-fA-F-]{36}$/.test(roomId)) {
//                     uni.showToast({ title: '房间ID格式错误', icon: 'none' });
//                     return;
//                 }
                
//                 try {
//                     // 获取当前用户ID
//                     const userData = JSON.parse(uni.getStorageSync('user'));
//                     const user_id = userData.userinfo.userid;
                    
//                     // 检查房间是否存在，并验证用户是否可加入
//                     const checkRes = await uni.request({
//                         url: 'http://172.16.24.120:5000/mysqlroom/check_room',
//                         method: 'POST',
//                         data: { room_id: roomId, user_id }
//                     });
                    
//                     if (checkRes.statusCode === 200) {
//                         if (checkRes.data.exists) {
//                             // 跳转房间页面（后续在房间页面触发加入逻辑）
//                             uni.navigateTo({ url: `/pages/room/room?room_id=${roomId}` });
//                         } else {
//                             uni.showToast({ title: '房间不存在或已关闭', icon: 'none' });
//                         }
//                     } else {
//                         uni.showToast({ title: '验证失败，请重试', icon: 'none' });
//                     }
//                 } catch (error) {
//                     uni.showToast({ title: '网络错误', icon: 'none' });
//                     console.error('加入房间失败:', error);
//                 }
//             }
//         }
//     });
// };

// 跳转到欢迎页的方法
const towelcome = () => {
    uni.navigateTo({
        // 保留当前页面，跳转到应用内的某个页面
        url: '/pages/welcome/welcome'
    });
};



// testwebsocket
const testwebsocket = () => {
  console.log("--------------------------------+++++++++++++++++++++++++++++++++++++++")
  socket.value.emit('get_room_clients', { room_id: 'f3c9176a-2bd1-4a35-bf64-4d59e786edbc'});
  // // 1. 发送事件到后端，请求当前所在房间的信息
  // socket.emit('get_current_room_info', {
  //   // 可携带必要参数（如用户ID，用于后端验证）
  //   user_id: localStorage.getItem('user_id') // 假设用户ID存在本地存储
  // });

  // // 2. 监听后端返回的房间信息
  // socket.on('current_room_info', (data) => {
  //   if (data.error) {
  //     console.error('获取房间信息失败：', data.error);
  //     // 前端提示（如弹窗）
  //     alert('获取房间信息失败：' + data.error);
  //     return;
  //   }

  //   // 成功获取信息，处理数据（如展示到页面）
  //   console.log('当前所在房间信息：', data);
  //   // 示例：更新页面状态
  //   // roomInfo.value = data;
  // });

  // 3. 避免重复监听（可选，根据框架特性处理）
  // 离开页面时移除监听
  // onUnmounted(() => {
  //   socket.off('current_room_info');
  // });
};
const test001 = async () => {
	console.log("**********************************调试button****************************************")
	console.log("**********************************调试button****************************************")
	console.log("**********************************调试button****************************************")
	console.log("**********************************调试button****************************************")
	console.log("**********************************调试button****************************************")
  //   const res = await uni.request({
  //       url: 'http://172.16.24.120:5000/mysqlroom/check_my_rooms',
		// method: 'POST',
		// data: {
		//        room_id: 'f3c9176a-2bd1-4a35-bf64-4d59e786edbc'
		//       }
  //   });
};

</script>

<style>
	
    /* 背景样式设置 */
    .bg {
        width: 100%;
        height: 100vh;
        background-image: 
            radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
            radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
            radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
            radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
        background-size: 
            130vmax 130vmax, 
            80vmax 80vmax, 
            90vmax 90vmax, 
            110vmax 110vmax, 
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax, 
            60vmax -30vmax, 
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
        background-repeat: no-repeat;
        animation: 3s movement linear infinite;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    /* 背景动画关键帧 */
    @keyframes movement {
        0%,
        100% {
            background-size: 
                130vmax 130vmax, 
                80vmax 80vmax, 
                90vmax 90vmax, 
                110vmax 110vmax, 
                90vmax 90vmax;
            background-position:
                -80vmax -80vmax, 
                60vmax -30vmax, 
                10vmax 10vmax,
                -30vmax -10vmax, 
                50vmax 50vmax;
        }
        25% {
            background-size: 
                100vmax 100vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                60vmax 60vmax;
            background-position:
                -60vmax -90vmax, 
                50vmax -40vmax,
                0vmax -20vmax,
                -40vmax -20vmax,
                40vmax 60vmax;
        }
        50% {
            background-size:
                80vmax 80vmax, 
                110vmax 110vmax, 
                80vmax 80vmax, 
                60vmax 60vmax, 
                80vmax 80vmax;
            background-position:
                -50vmax -70vmax, 
                40vmax -30vmax, 
                10vmax 0vmax, 
                20vmax 10vmax, 
                30vmax 70vmax;
        }
        75% {
            background-size: 
                90vmax 90vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                70vmax 70vmax;
            background-position:
                -50vmax -40vmax, 
                50vmax -30vmax, 
                20vmax 0vmax,
                -10vmax 10vmax, 
                40vmax 60vmax;
        }
    }

    /* 背景伪元素样式 */
    .bg::after {
        width: 100%;
        height: 100%;
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: -2;
    }

    /* 外部包围|顶层样式设置 */
    .wrap{
        width: 100%;
        min-height: 80vh;
        /* background-color: black; */
    }

    /* 容器样式设置 */
    .container{
        width: 90%;
        min-height: 80vh;
        margin: auto;
        /* background-color: yellowgreen; */
    }
	
	
	.navbar{
/* 		background-size: cover;	
		position:relative; display:flex;
		flex-direction:column; */
		/* padding-top:20px; */
		/* z-index: 3; */
		/* background-color: green; */
	}
	
	
	
	
	
	
	
    /* 头部样式设置 */
    .header{
        /* background-color: grey; */
        width: 100%;
        height: 100rpx;
        margin-top: 40rpx;	
        display: flex;
        align-items: center;
        justify-content: space-between	
    }

    /* 头部 logo 样式 */
    .logo{
        width: 270rpx;
        height: 100rpx;
    }

    /* 头部 logo 图片样式 */
    .logo image{
        width: 100%;
        height: 100%;
        /* 平铺 */
    }

    /* 头部角色图标样式 */
    .role{
        width: 100rpx;
        height: 100rpx;
    }

    /* 头部角色图标图片样式 */
    .role image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 身体样式设置——大图 */
    .banner{
        width: 100%;
        height: 700rpx;
        margin-top: 40rpx;
        /* background-color: aquamarine; */
    }

    /* 身体大图图片样式 */
    .banner image{
        width: 100%;
        height: 100%;
        /* 平铺？  占满？   flex的属性？ */
        object-fit: cover;
    }

    /* 身体样式设置——选项卡*/
    .info{
        width: 100%;
        height: 550rpx;
        border-radius: 60rpx;/* 圆角 */
        /* background-color:black; */
        /* 透明 */
        background-color: rgba(255, 255, 255, 0.2);
        /* margin-top: 40rpx; */
        display: flex;
        /* 设置主轴方向 */
        flex-direction: row;
        /* 在主轴方向的对齐方式 */
        justify-content: space-around;
        flex-wrap: wrap;
    }

    /* 选项栏容器 */
    .info_item{
        /* background-color: aquamarine; */
        width: 30%;
        height: 40%;
        /* margin: auto; */
        /* background-color: rgba(255, 255, 255, 0.5); */
        display: flex;		
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        justify-content: space-around;
        padding: 15rpx;
        /* 圆角 */
        border-radius: 80rpx;
        transition: all 0.3s ease;
    }

    /* 悬停特效 */
    .info_item:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    /* 放icon的容器 */
    .icon{
        width: 200rpx;
        height: 200rpx;	
    }

    /* icon图片本身 */
    .icon image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 自定义字体 */
    @font-face {
        font-family: 'fontali'; 
        src:url('@/static/font/DingTalk-JinBuTi.woff') format('woff');
    }

    /* 选项卡文字样式 */
    .text{
        /* flex的项目属性,1代表一个参数属性flex是简写:按剩余空间弹性扩展 */
        flex:1;
        color: cadetblue;
        padding-left: 20rpx;
        font-family: 'fontali';  
    }

    /* 脚部样式设置 */
    .foot{
        width: 100%;
        height: 80rpx;
        position: absolute;
        bottom: 70rpx; 
    }

    /* 底部栏样式 */
    .footer {
        background-color: black;
        text-align: center;
        /* padding: 20rpx 0; */
    }

    /* 底部栏分割线样式 */
    .footer-divider {
        width: 45%;
        height: 1rpx;
        background-color: #ccc;
        margin: 10rpx auto;
    }		

    /* 底部栏图标容器样式 */
    .footer-icons {
        display: flex;
        justify-content: center;
        margin-bottom: 1rpx;
    }		

    /* 底部栏图标样式 */
    .footer-icon {
        width: 40rpx;
        height: 40rpx;
        margin: 0 10rpx;
    }		

    /* 底部栏版权信息样式 */
    .footer-copyright {
        font-family: 'Roboto', sans-serif; /* 使用Roboto字体，你可以替换为其他你喜欢的字体 */
        font-size: 12px;
        letter-spacing: 1.7px; /* 增加字母间距 */
        line-height: 1.8; /* 增加行高，实现上下间距更大 */
        color: #cfcfcf;
    }
</style>